Basic HTML Web Page Structure

A web page constructed using HTML has a basic and essential structure. The page always begins with the start tag of the html element and always terminates with the end tag of the html element as follows:

Example 1

<html>



...web page...



</html>

The html element basically tells your computer that this is an HTML document. All other element tags are 'nested' within the start and end html tags. The web page is then further subdivided into two main sections which are the 'head' and the 'body'.

The head section begins with the <head> start tag and terminates with the </head> end tag. Immediately following this comes the <body> start tag and just before the html end tag comes the </body> end tag.

There is only one set of <html>...</html> tags, one set of <head>...</head> tags and one set of <body>...</body> tags. This basic HTML web page structure can be illustrated by the following example:

Example 2

<html>





<head>




</head>






<body>




</body>






</html>

The head section or document head has little content and mostly contains HTML coded instructions on how to title, categorize and 'run' the web page. The body section or document body on the other hand contains almost all of the content that you will put on your web page and this content —usually text but can also be pictures and sounds— is formatted using more HTML code. All text that you place outside of any angle brackets will become 'visible text' and will be displayed by your web browser on your web page. By placing that text in between the start and end tags of certain HTML elements, you can instruct a web browser where and how to display that text.

Adding a Title to your Web Page

Okay let's build further on Example 2. (Click here to read a previous page in this tutorial if you are not familiar with how to create and edit an HTML document.)

Web pages usually have a title that appears in the title bar that runs across the very top of the web page. This title is created using the <title>...</title> tags which are themselves always nested within the <head>...</head> tags. All text appearing after the <title> start tag and before the </title> end tag will be displayed as your web page title. Hence the following HTML code will produce a web page entitled 'My Home Page':

Example 3

<html>





<head>




<title> My Home Page </title>




</head>






<body>




</body>






</html>

Adding a Title to your Web Page

Adding Content to your Web Page

Now to add some content to your web page all you have to do is type some text in between the <body>...</body> tags. So let's, for example, put the words 'HELLO WORLD!' on your web page.

<html>





<head>




<title> My Home Page </title>




</head>





<body>




HELLO WORLD!




</body>





</html>

This will produce a web page that looks like this:

homepage (12K)

Of course, you're probably going to want to do alot more than just create a web page with a title and some plain text on a blank white background. So let's conclude this set of tutorials with learning how to use HTML elements in conjunction with HTML attributes...

Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates